<template>
	<view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<text class="text">首页</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>
		<view style="padding: 16px 16px 10px 16px">
		<u-swiper :list="bannerList" mode="round" @click="onBannerClick"></u-swiper>
			<view class="commons" v-for="group in commonList" :key="group.entryId">
				<p class="commons-title">{{ group.entryName }}</p>
				<u-grid class="commons-ctn" :col="4" :border="false">
					<u-grid-item class="commons-ctn-item" v-for="(item,index) in group.children" :index="index"
						:key="item.entryId" @click="onEntryItemClick(item.entryId, item)">
						<view class="commons-ctn-item-icon">
							<u-image width="44px" height="44px" :src="item.imageData || homeGridIcon2x"></u-image>
						</view>
						<view class="commons-ctn-item-text">{{item.entryName}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="cell" v-for="(item,index) in taskCellList" :key="index">
				<u-cell-group :border="false" style="width: 100%;">
					<u-cell-item :arrow="true" :title="item.title" :border-bottom="false" :center="true" :title-style="titleStyle"
						@click="goTaskList(index)">
						<template v-slot:right-icon v-if="index == 0">
							<u-badge type="error" :count="item.value" :absolute="false" size="default"></u-badge>
						</template>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import pageConfig from '@/pages.json';
	import {getBoundingClientRect} from "@/utils";
	import {
		treeDataTranslate,
		setObjectToSessionStorage
	} from '@/utils';
	import { uploadMixin } from '@/core/mixins';
	import { FlowOperationController } from '@/api/flowController.js';

	export default {
		mixins: [uploadMixin],
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
			const rect = getBoundingClientRect(windowWidth,statusBarHeight)
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,
				headerHeight:0,
				homeGridIcon2x: require('../../static/home/homeGridIcon2x.png'),
				swiperImg: require('../../static/home/swiperImg.png'),
				getHomeEntryList: [],
				titleStyle: {
					'color': '#333333',
					'font-weight': 'bold',
					'font-size':'32rpx'
				},
				taskCellList: [{
						title: '待办任务',
						value: '10'
					},
					{
						title: '历史任务',
						value: '100'
					},
					{
						title: '已办任务',
						value: '9'
					}
				],
				routerMap: {}
			}
		},
		// created() {
		// 	this.getHomeEntryList = uni.getStorageSync('setHomeEntryList')
		// 	console.log(this.getHomeEntryList)
		// },
		mounted() {
			this.getHomeEntryList = uni.getStorageSync('setHomeEntryList');
			this.buildPageConfig();
			this.formInit();
			
		},
		methods: {
			onBannerClick(index) {		
				
				
			   const clickedItem = this.bannerList[index];
			   const entryName = clickedItem.entryName
			   	let jsonString  = clickedItem.extraData;
					// 转为对象
					const obj = JSON.parse(jsonString);
					const targetUrl = obj.targetUrl
					 if (!obj?.targetUrl) {
					      return console.error(
					        '配置错误： 缺少 extraData.targetUrl',
					        clickedItem
					      );
					    }
						
					uni.navigateTo({
					  // url: `/pages/common/webview?url=${encodeURIComponent(rawUrl)}`
					   // url: '/pages/common/webview?url=' + targetUrl
					   url: `/pages/common/webview?url=${encodeURIComponent(targetUrl)}&title=${entryName}`
					   
					});
			 },
			 
			 
			 
			buildPageConfig() {
				this.routerMap = {};
				if (pageConfig) {
					if (Array.isArray(pageConfig.pages)) {
						pageConfig.pages.forEach(page => {
							if (page.name && page.name !== '') {
								let path = '/' + page.path;
								this.routerMap[page.name] = path;
							}
						});
					}
					if (Array.isArray(pageConfig.subPackages)) {
						pageConfig.subPackages.forEach(subPackage => {
							let root = subPackage.root;
							if (Array.isArray(subPackage.pages)) {
								subPackage.pages.forEach(page => {
									if (page.name && page.name !== '') {
										let path = '/' + root + '/' + page.path;
										this.routerMap[page.name] = path;
									}
								});
							}
						});
					}
				}
			},
			swiperClick(index) {
			},
			onEntryItemClick(entryId, item) {
				this.jumpTo(entryId, item);
			},
			jumpTo(entryId, menu) {
				const menuItem = JSON.parse(menu.extraData)
				const entryName = menu.entryName
				if (menuItem != null && setObjectToSessionStorage('currentMenuId', entryId)) {
					// 路由表单
					if (menuItem.bindType === this.SysMenuBindType.ROUTER && menuItem.formRouterName) {
						let path = this.routerMap[menuItem.formRouterName];
						if (path != null && path !== '') {
							uni.navigateTo({
								url: path
							});
						} else {
							console.error('未找到路由：' + menuItem.formRouterName);
						}
						return
					}
					// 在线表单菜单
					if (menuItem.bindType === this.SysMenuBindType.ONLINE_FORM && menuItem.onlineFormId != null && menuItem.onlineFormId !== '') {
						uni.navigateTo({
							url: '/views/online/form?passData=' + encodeURIComponent(JSON
								.stringify({
									formId: menuItem.onlineFormId,
									formType: this.SysOnlineFormType.QUERY
								}))
						})
					}
					// 工单列表菜单
					if (menuItem.bindType === this.SysMenuBindType.WORK_ORDER &&
						menuItem.onlineFormId != null && menuItem.onlineFormId !== '' &&
						menuItem.onlineFlowEntryId != null && menuItem.onlineFlowEntryId !== '') {
						uni.navigateTo({
							url: '/views/online/form?passData=' + encodeURIComponent(JSON
								.stringify({
									formId: menuItem.onlineFormId,
									entryId: menuItem.onlineFlowEntryId
								}))
						})
					}
					// 外部链接菜单
					if (menuItem.bindType === this.SysMenuBindType.THRID_URL &&
						menuItem.targetUrl != null && menuItem.targetUrl !== '' ) {
						uni.navigateTo({
						  url: `/pages/common/webview?url=${encodeURIComponent(menuItem.targetUrl)}&title=${entryName}`
						//    url: '/pages/common/webview?url=' + menuItem.targetUrl
						});
					}
				}
			},
			goTaskList(index) {
				if (index === 0) {
					uni.navigateTo({
						url: '/views/workflow/formRuntimeTask/formMyTask'
					})
				} else if (index === 1) {
					uni.navigateTo({
						url: '/views/workflow/formRuntimeTask/formMyHistoryTask'
					})
				} else if (index === 2) {
					uni.navigateTo({
						url: '/views/workflow/formRuntimeTask/formMyApprovedTask'
					})
				}
			},
			formInit () {
				let params = {
					pageParam: {
						pageNum: 1,
						pageSize: 1
					},
				}
				FlowOperationController.countRuntimeTask(this).then(res => {
					// 代办任务
					this.taskCellList[0].value = res || 0;
				}).catch(e => {});
			}
		},
		computed: {
			getFinalEntryList() {
				return (this.getHomeEntryList || []).map(item => {
					let temp = {
						...item
					}
					try {
						temp.imageData = temp.imageData ? JSON.parse(temp.imageData) : undefined;
						if (temp.imageData) {
							temp.imageData = this.getUploadFileUrl(temp.imageData, {
								filename: temp.imageData.filename
							})
						}
					} catch (e) {
						temp.imageData = null;
					}
					return temp;
				});
			},
			commonList() {
				if (Array.isArray(this.getFinalEntryList)) {
					let tempList = this.getFinalEntryList.filter(item => {
						return item.entryType === this.MobileEntryType.GROUP || item.entryType === this
							.MobileEntryType.SUDOKU;
					});
					if (Array.isArray(tempList)) {
						return treeDataTranslate(tempList.map(item => {
							return {
								...item
							}
						}), 'entryId', 'parentId').filter(item => (item.children || []).length > 0);
					}
				}

				return [];
			},

			bannerList() {
				if (Array.isArray(this.getFinalEntryList)) {
					let arr = this.getFinalEntryList.filter(item => {
						return item.entryType === this.MobileEntryType.BANNER;
					});
					let bannerlist = arr.map(item => {
						return {
							...item,
							image: item.imageData || this.swiperImg
						}
					})
					console.log(bannerlist)
					
					return bannerlist
				} else {
					return [];
				}
			},
		}
	}
</script>

<style lang="less">
	.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			.text {
				max-width: 60%;
				margin: 0 auto;
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
			}

			.nav-right {
				display: flex;

				.mobile-font {
					color: #707070;
					font-size: 36rpx;

					&+.mobile-font {
						margin-left: 12rpx;
					}
				}
			}
		}
	.commons {
		width: 100%;
		// height: 13rem;
		margin-top: 32rpx;
		border-radius: 16rpx;
		padding: 24rpx 0;
		background: #ffffff;
	}

	.commons-title {
		margin: 0;
		padding: 24rpx 30rpx;
		color: #000000;
		font-weight: 700;
		font-size: 32rpx;
	}

	.commons-ctn-item {
		margin-bottom: 40rpx;
	}

	.commons-ctn-item-icon {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
	}

	.commons-ctn-item-text {
		width: 100%;
		font-size: 24rpx;
		color: #646566;
		text-align: center;
		margin-top: 16rpx;
	}

	.cell {
		width: 100%;
		height: 112rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 32rpx 0;
		display: flex;
		align-items: center;
	}
</style>
<style>
	.u-cell{
		padding: 20rpx 32rpx !important;
	}
	.uicon-arrow-right{
		color: #969799;
	}
</style>